<template>
<div class="merchandise-management-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">探店信息</div>
        <section>
            <div class="wlm-form-content">
                <el-form ref="smsSettings" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="145px" class="retail-form" label-position="right">
                    <el-form-item label="探店类型" prop="goods_name">
                        <el-radio-group v-model="formFormatData.formData.type">
                            <el-radio :label="10">图文</el-radio>
                            <el-radio :label="20">视频</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="关联话题">
                        <el-select v-model="formFormatData.formData.topic_id" placeholder="请选择">
                            <el-option v-for="item in topicList" :key="item.id" :label="item.title" :value="`${item.id}`">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关联商家" prop="bus_id">
                        <el-select @change="busChange" :disabled="!!formFormatData.api['editForm']['params']['id']" filterable v-model="formFormatData.formData.bus_id" placeholder="全部商家（可搜索）">
                            <el-option v-for="item in shopData" :disabled="item.storenum==0" :key="item.value" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select :disabled="!formFormatData.formData.bus_id" filterable v-model="formFormatData.formData.shop_id" placeholder="全部门店">
                            <el-option v-for="item in mendianData" :disabled="item.storenum==0" :key="item.value" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布者">
                        <el-select v-model="formFormatData.formData.user_id" placeholder="系统发布">
                            <el-option  label="系统发布" :key="0" :value="0">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="热门" prop="goods_name">
                        <el-radio-group v-model="formFormatData.formData.is_popular">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="排序" prop="goods_name">
                        <el-input v-model="formFormatData.formData.sort" >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="获赞数" prop="goods_name">
                        <el-input v-model="formFormatData.formData.virtual_likes">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="封面图" v-if="formFormatData.formData.type==10">
                        <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    </el-form-item>
                    <el-form-item label="图集" prop="goodsImages" v-if="formFormatData.formData.type==10">
                        <choose-files ref="chooseFiles" :config="choosePlatformConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                        <div class="form-help">拖拽图片调整顺序</div>
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input type="textarea" v-model="formFormatData.formData.content" maxlength="50">
                        </el-input>
                        <div class="form-help">商品详情页展示卖点信息，不超过50个字符</div>
                    </el-form-item>
                    <el-form-item label="视频" v-if="formFormatData.formData.type==20">
                        <choose-files ref="chooseFiles" :config="choosePlatformVConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                        <div class="form-help">目前只是支持手机端播放，时长建议10s-20s</div>
                    </el-form-item>
                </el-form>
            </div>
        </section>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" type="primary" @click="saveForm" :disabled="isFormFormatSave" :loading="isFormFormatSave">保存</el-button>
    </div>
</div>
</template>

<script>
import upload from '@/components/Upload/index'
import ChooseFiles from '@/components/ChooseFiles/index'
import ueditor from '@/components/Ueditor/index'
import MultipleSpecifications from '@/components/MultipleSpecifications/index'
import power from '@/mixins/power'
import {
  businessIndex,
  getShopData,
  getTopicList,
  shopAddOrEdit,
  shopIndex
} from '@/api/merchant'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form'), power],
  name: 'ManagementUserAdd',
  components: {
    upload,
    ChooseFiles,
    ueditor,
    MultipleSpecifications
  },
  directives: {

  },
  computed: {
  },
  created() {
    this.$nextTick(() => {
      this.shopDataGet()
      this.getTopicList()
    })
  },
  data() {
    var checkImg = (rule, value, callback) => {
      const { message } = rule
      const image = this.formFormatData.formData.image
      if (Array.isArray(image) && image.length === 0) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }
    return {
      cardData: [],
      category_name: [],
      category_obj: [],
      ueditorList: [],
      categoryData: [],
      topicList: [],
      shopData: [],
      mendianData: [],
      defaultMsg: '',
      shopInfoMsg: '',
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'cover_image',
          model: 'img'
        }
      },
      choosePlatformConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 10,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'image',
          model: 'img'
        }
      },
      choosePlatformVConfig: {
        type: ['video'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'video',
        bindKey: {
          key: 'video',
          model: 'video'
        }
      },
      columnData: [{
        label: '售卖价',
        key: 'goods_price',
        background: {
          cellStyle: 'background:#fff;',
          headerStyle: 'background:#f2f2f2;color:#909399;'
        }
      }, {
        label: '市场价',
        key: 'line_price',
        background: {
          cellStyle: 'background:#fff;',
          headerStyle: 'background:#f2f2f2;color:#909399;'
        }
      }, {
        label: '商品编码',
        key: 'goods_no',
        background: {
          cellStyle: 'background:#fff;',
          headerStyle: 'background:#f2f2f2;color:#909399;'
        }
      }, {
        label: '商品库存',
        key: 'stock_num',
        background: {
          cellStyle: 'background:#fff;',
          headerStyle: 'background:#f2f2f2;color:#909399;'
        }
      }, {
        label: '库存预警',
        key: 'stock_early',
        background: {
          cellStyle: 'background:#fff;',
          headerStyle: 'background:#f2f2f2;color:#909399;'
        }
      }],
      formFormatData: {
        key: ['smsSettings'],
        model: {
          isReset: true
        },
        api: {
          editForm: {
            api: getShopData,
            params: {
              id: ''
            },
            redirect: 'shop_id',
            filters: {
              img: {
                bindInit: ['choosePlatformConfig', 'chooseBgConfig']
              },
              video: {
                bindInit: ['choosePlatformVConfig']
              }
            },
            noFilter: ['category_name']
          },
          submitForm: shopAddOrEdit
        },
        formData: {
          image: [],
          straight_image: [],
          shop_id: '',
          topic_id: '',
          user_id: '',
          is_popular: 1,
          sort: '',
          content: '',
          virtual_likes: '',
          bus_id: '',
          type: 10,
          video: []
        },
        rules: {
          goodsImages: [
            {
              message: '请选择商品图片',
              required: true,
              validator: checkImg,
              trigger: 'blur'
            }
          ],
          delivery_id: [
            {
              message: '请选择运费模板',
              required: true,
              trigger: 'change'
            }
          ]
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    getTopicList() {
      getTopicList({ is_page: 0 }).then((res) => {
        const { data: { data: msgData = [] }} = res
        console.log(msgData)
        this.topicList = msgData.data
      })
    },
    busChange() {
      this.formFormatData.formData.shop_id = ''
      shopIndex({ bus_id: this.formFormatData.formData.bus_id, is_page: 2 }).then((res) => {
        const { data: { data: msgData = [] }} = res
        console.log(msgData)
        this.mendianData = msgData
      })
    },
    shopDataGet() {
      businessIndex({ list_rows: 'all' }).then((response) => {
        const { data: { data: msgData = [] }} = response
        this.shopData = msgData
      })
      if (this.formFormatData.formData.bus_id) {
        this.busChange()
      }
    },
    formFormatCallBack(data, type, response) {
    //   if (type === 'editForm') {

    //   }
    },
    saveForm() {
      this.formFormatSubmit({ router: { type: 'replace', path: '/merchandise/merchandiseManagement', code: 1 }})
    }
  }
}
</script>

<style lang="scss" scoped>
$is-success: #67c23a;

.merchandise-management-add {
    .inputNumber {
        /deep/ .el-input {
            width: 60px;
        }
    }

    .poster {

        /deep/ .el-input,
        .el-input-number {
            width: 160px;
        }
    }

    /deep/ .wlm-form-steps {
        white-space: nowrap;
        background: #f7f7f7;
        padding-bottom: 20px;

        .goods-step {
            >span {
                position: relative;
                display: inline-block;
                cursor: pointer;
                background: #fff;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 14px;
                box-sizing: border-box;
                width: 515px;
                margin-left: -30px;
                z-index: 0;
                border-radius: 40px;

                &.active {
                    position: relative;
                    z-index: 1;
                    color: #fff;
                    background: #409eff;
                }
            }
        }
    }

    .category-tree {
        width: 270px;
        margin-top: 20px;
    }

    .send-type {
        margin-top: 15px;
        padding: 0 20px;
        margin-bottom: 20px;

        .el-button {
            position: relative;
            overflow: hidden;
            padding: 15px 40px;

            &>span {
                &>p {
                    font-weight: 600;
                    margin-bottom: 15px;
                }

                &>span {
                    display: inline-block;
                    margin-bottom: 5px;
                    color: #c3c3c3;
                }
            }

            .triangle {
                display: none;
                color: #fff;
            }

            &.is-active {
                &>span {
                    // &>span {
                    //     color: #387abd;
                    // }
                }

                .triangle {
                    display: inline-block;
                    position: absolute;
                    right: 0;
                    line-height: 60px;
                    text-align: center;
                    background: #409eff !important;
                    transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                    -moz-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);

                    >i {
                        transform: rotate(-45deg);
                        -webkit-transform: rotate(-45deg);
                        -moz-transform: rotate(-45deg);
                        -ms-transform: rotate(-45deg);
                    }
                }
            }
        }
    }
}
</style>
